<script setup lang="ts">
import { ElButton, ElInput, ElTag } from 'element-plus'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const type = computed(() => router.currentRoute.value.query.type)
</script>

<template>
    <div class="refund">
        <div>
            <ElButton size="small"
                      @click="router.push('/trade-center/good-room/refund-request')"
            >
                返回列表
            </ElButton>
        </div>

        <div class="refund-main">
            <h4>服务单信息</h4>

            <ul class="f">
                <li>
                    <p>
                        <span class="c">服务单号：</span>313860326
                    </p>

                    <p>
                        <span class="c">申请时间：</span>313860326
                    </p>
                </li>

                <li>
                    <p>
                        <span class="c">申请状态：</span>

                        <ElTag type="danger">
                            待处理
                        </ElTag>
                    </p>

                    <p>
                        <span class="c">用户账号：</span>313860326
                    </p>
                </li>

                <li>
                    <p>
                        <span class="c">订单编号：</span>
                        31386
                        <ElButton style="color:#F53639"
                                  type="text"
                        >
                            查看
                        </ElButton>
                    </p>

                    <p>
                        <span class="c">用户账号：</span>asda
                    </p>
                </li>
            </ul>

            <ul class="f">
                <li>
                    <p>
                        <span class="c">订单金额：</span>￥20000
                    </p>

                    <p>
                        <span class="c">退款类型：</span>

                        <ElTag type="warning">
                            取消订单
                        </ElTag>
                    </p>
                </li>

                <li>
                    <p>
                        <span class="c">确认退款金额：</span>313860326
                    </p>

                    <p>
                        <span class="c">退款原因：</span>313860326
                    </p>
                </li>

                <li>
                    <p>
                        <span class="c">退款方式：</span>313860326
                    </p>

                    <p>
                        <span class="c">用户账号：</span>asda
                    </p>
                </li>
            </ul>

            <ul v-if="type === 'view'"
                class="f"
            >
                <li>
                    <p>
                        <span class="c">处理人员：</span>admin
                    </p>
                </li>

                <li>
                    <p>
                        <span class="c">处理时间：</span>313860326
                    </p>
                </li>

                <li>
                    <p>
                        <span class="c">操作备注：</span>313860326
                    </p>
                </li>
            </ul>
        </div>

        <div v-if="type === 'setup'"
             style="padding-left:20px"
        >
            <div style="margin:20px 0;">
                <h5>处理备注</h5>

                <ElInput type="text"
                         style="width:476px"
                />
            </div>

            <ElButton color="#DA0004">
                确认退款
            </ElButton>

            <ElButton>拒接退款</ElButton>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .refund {
    background: #fff;
    padding: 20px;

    .refund-main {
        // height: 450px;
        margin: 20px 0;
        padding: 20px;
        font-size: 16px;
        color: #1d2129;

        h4 {
            font-size: 20px;
            font-weight: 600;
        }

        .f {
            display: flex;
            justify-content: space-around;
            margin: 10px 0;

            li {
                flex: 1;

                p {
                    margin: 10px 0;

                    .c {
                        width: 120px;
                        display: inline-block;
                        text-align: right;
                    }
                }
            }
        }
    }

    .mr-t {
        margin-bottom: 20px;
    }
}

.ck::after {
    content: '*';
    color: #da0004;
}
</style>
